<template>
    <div class="list">
        <div class="top">
            <div class="left">
                <span></span>
                <p>王者荣耀</p>
            </div>
            <div class="right">
                <p>更多</p>
                <span></span>
            </div>
        </div>
        <div class="content">
            <div v-for="(v,index) in arr" :key="index" class="box">
                <img :src="v.img">
                <p class="describe">{{ v.content }}</p>
                <div class="bottom">
                    <p class="user">{{ v.user }}</p>
                    <div class="people">
                        <span></span>
                        <p>{{ v.count }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"KingplaySon",
    props:{
        arr:{
            type:Array,
            required:true
        }
    }
}
</script>

<style scoped>
.list {
  width: 96.26666667vw;
  margin: 0 auto 5.33333333vw;
}
.list .top {
  height: 14vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list .top .left {
  width: 25.2vw;
  height: 6.13333333vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list .top .left span {
  width: 6vw;
  height: 6.13333333vw;
  background: url(https:////livewebbs2.msstatic.com/huya_hot_rec_theme_logo_1582705602.png) no-repeat center / 100%;
}
.list .top .left p {
  width: 18.26666667vw;
  height: 4.53333333vw;
  line-height: 4.53333333vw;
  font-size: 4.26666667vw;
  color: #333333;
}
.list .top .right {
  width: 10.66666667vw;
  height: 6.13333333vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list .top .right p {
  width: 9vw;
  height: 4.53333333vw;
  line-height: 4.53333333vw;
  font-size: 4.26666667vw;
  color: #666666;
}
.list .top .right span {
  width: 1.73333333vw;
  height: 3.46666667vw;
  background: url(https://a.msstatic.com/huya/main3/assets/img/index/more-icon_8e480.png) no-repeat center / 100%;
}
.list .content {
  column-count: 2;
  overflow: hidden;
}
.list .content .box {
  width: 46vw;
  height: 40.93333333vw;
}
.list .content .box img {
  width: 46vw;
  height: 26.66666667vw;
  border-radius: 1.06666667vw;
}
.list .content .box .describe {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3.73333333vw;
  padding: 1.33333333vw 0;
  color: #000000;
  font-size: 3.46666667vw;
}
.list .content .box .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 4vw;
  padding: 1.33333333vw 0;
}
.list .content .box .bottom .user {
  width:  17.66666667vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 4vw;
  font-size: 3.2vw;
  color: #999999;
}
.list .content .box .bottom .people {
  height: 4vw;
  display: flex;
}
.list .content .box .bottom .people span {
  width: 3.2vw;
  height: 2.8vw;
  background: url(https://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png) no-repeat center / 100%;
}
.list .content .box .bottom .people p {
  line-height: 4vw;
  font-size: 2.93333333vw;
  color: #999999;
}

</style>